<template>
  <div>
    <eagle-dialog-page
      :url="url"
      :params="userParams"
      @initList="_initListUser"
      @open="open"
      @submit="submit"
      @callbackDialog="callbackDialog"
      @setData="setData"
      v-bind="$attrs"
      v-on="$listeners"
      ref="eagleDialogPage"
    >
      <eagle-cell
        v-for="(item, index) in listUser"
        :key="index"
      >
        <div class="user-item">
          <div>
            <div class="mb-5 color-gray1">{{ item.ChnName }}</div>
            <div class="color-gray3">
              {{ item.OrgFullName
              }}<span v-if="item.OrgFullName && item.PostName"></span>{{ item.PostName }}
            </div>
          </div>
          <eagle-checkbox
            v-if="$attrs.isMulti?$attrs.isMulti:false"
            :name="item.UserName"
            shape="round"
          />
          <eagle-radio
            v-else
            :name="item.UserName"
            @click="radioClick(item)"
          ></eagle-radio>

        </div>
      </eagle-cell>

      <template #seletedSlot>
        <eagle-cell
          name="seletedSlot"
          v-for="(item, index) in selectedUserlist"
          :key="index"
        >
          <div class="risk_item_buton">
            <div class="mb-5">
              <div class="mb-5">{{ item.ChnName }}</div>
              <div>
                {{ item.OrgFullName
                }}<span v-if="item.OrgFullName && item.PostName"></span>{{ item.PostName }}
              </div>
            </div>
            <van-icon
              name="delete"
              @click="deleteSelect(item.UserName)"
            />
          </div>
        </eagle-cell>
      </template>
    </eagle-dialog-page>
  </div>
</template>
<script>
export default {
  name: "user-choose-dialog",
  props: {
    title: {
      type: String,
      default: "选择员工",
    },
    confirmButton: {
      type: String,
      default: "确认",
    },
    tagData: {
      type: Array,
      default: () => [],
    },
    selectedValue: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      url: "/UserUser/GetChooseUserPageData",
      listUser: [],
      userParams: [
        {
          Name: "ChnName",
          dataType: "List",
          accounted: true,
          userKind: 0,
          keywords: "",
        },
      ],
      selectedUserlist: [],
      selecteUsers: [],
      simSelectObject: { code: "", name: "" },
      userRowIndex: -1,
      isDefault: true,
    };
  },
  computed: {
    multi: {
      get() {
        if (this.$attrs.isMulti) {
          return this.$attrs.isMulti;
        } else {
          return false;
        }
      },
    },
  },
  methods: {
    _initListUser(list) {
      if(this.isDefault){
        this.selectedUserlist = this.tagData;
      }
      if (
        this.$attrs.isOpenNew ||
        (this.$attrs.rowIndex && this.$attrs.rowIndex != this.userRowIndex)
      ) {
        this.userRowIndex = this.$attrs.rowIndex;
        this.selectedUserlist = this.tagData;
      }
      this.listUser = list;
      let _this = this;
      _this.selecteUsers = [];
      var newData = [];
      if (!this.multi) {
        newData = [{ code: this.selectedValue, UserName: this.selectedValue }];
        _this.$refs.eagleDialogPage.initSeletedData(newData);
        _this.selectedUserlist = newData;
      } else {
        for (var i = 0; i < _this.selectedUserlist.length; i++) {
          _this.selecteUsers.push(_this.selectedUserlist[i].code);
        }
        if (_this.selecteUsers.length > 0) {
          _this.$axios
            .get("/UserUser/GetChooseUsers", {
              params: { userNames: _this.selecteUsers.join(",") },
            })
            .then((userRes) => {
              if (userRes.data && userRes.data.length > 0) {
                for (var j = 0; j < userRes.data.length; j++) {
                  var innerItem = userRes.data[j];
                  newData.push({
                    UserName: innerItem.UserName,
                    ChnName: innerItem.ChnName,
                    code: innerItem.UserName,
                    name: innerItem.ChnName,
                    OrgFullName: innerItem.OrgFullName,
                    PostName: innerItem.PostName,
                  });
                }
              }
              _this.$refs.eagleDialogPage.initSeletedData(newData);
              _this.selectedUserlist = newData;
            });
        }
      }
      this.isDefault = false;
    },
    open(list) {
      
      this.listUser = list;
    },
    clearUserName() {
      this.selectedUserlist.splice(0, this.selectedUserlist.length);
    },
    submit() {
      this.$refs.eagleDialogPage.submit();
    },
    setData(data) {
      if (this.multi) {
        this.selectedUserlist = data;
      } else {
        this.simSelectObject = data;
      }
    },
    callbackDialog(data) {
      if (!data || data.length == 0) {
        this.$toast("您还未选择人员");
        return false;
      }
      if (this.multi) {
        this.$emit("callback", this.selectedUserlist);
      } else {
        this.$emit("callback", { code: data.code, name: data.name });
      }
      this.$emit("update:show", false);
    },
    deleteSelect(userName) {
      this.$refs.eagleDialogPage.deleteSelect(userName);
      this.selectedUserlist.splice(this.selectedUserlist.indexOf(userName), 1);
    },
    radioClick(item) {
      let resultRadio = Object.assign({ code: "", name: "" }, item);
      resultRadio.code = item.UserName;
      resultRadio.name = item.ChnName;
      this.$emit("callback", resultRadio);
      this.$emit("update:show", false);
    },
  },
};
</script>
<style lang="less" scoped>
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk_item_radio {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #e8f1f8;
}

.risk_item_buton {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>